/**
 * Dear programmer:
 * When I wrote this code, only god and I knew how it worked.
 * Now, only god knows it!
 *
 * @author: Pegasus  Date: 2018/11/21 Time: 10:06
 *
 * 个人中心
 */

import React, {Component} from 'react';
import {
    Linking,
    SafeAreaView, ScrollView, TouchableOpacity, View, NativeModules, TouchableHighlight, StyleSheet,Text,
} from 'react-native';
import {connect} from 'react-redux';
import OffWorkView from "../../../component/OffWorkView/OffWorkView"
import {FONT_COLOR_TITLE, FONT_SIZE_TITLE} from "../../../constant/PHColors";
import {SCREEN_HEIGHT, SCREEN_WIDTH} from "../../../constant/PHScreen";
import AntDesign from "react-native-vector-icons/AntDesign";
import {Header} from "react-navigation";

class TestScreen extends Component {

    static navigationOptions = ({navigation}) => ({
        headerTitle: `测试界面`,
        headerLeft: <View/>,
        headerRight: <OffWorkView navigation={navigation}/>
    });

    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            leftPagePosition:'left',    //'left' or 'right'
            leftPageType:'菜类',          //'菜类' or '助记码'
            leftPage1_arr:['A','D','G','J','M','P','S','X',],
            leftPage2_arr:['B','E','H','K','N','Q','T','Y',],
            leftPage3_arr:['C','F','I','L','O','R','W','Z',],
        };
    }

    render() {
        return (
            <SafeAreaView style={styles.body}>
                {
                    (this.state.leftPagePosition==="right")&&(this.showRightPage())
                }
                <View style={styles.leftPage}>
                    {
                        (this.state.leftPageType==="助记码")&&(
                            this.showZJM()
                        )
                    }
                    {
                        (this.state.leftPageType==="菜类")&&(
                            this.showCL()
                        )
                    }
                    <View style={styles.leftBottomPage}>
                        {
                            (this.state.leftPagePosition==="right")
                            &&
                            (
                                <TouchableOpacity onPress={()=>{
                                    this.setState({
                                        leftPagePosition:"left",
                                    })
                                }}>
                                    <View style={styles.leftBottom2}>
                                        <Text style={styles.letter}>
                                            <AntDesign name={'arrowleft'} size={20} style={{color: '#c0c0c0'}}/>
                                        </Text>
                                    </View>
                                </TouchableOpacity>
                            )
                        }
                        <TouchableOpacity onPress={()=>{
                            let leftPageType = "菜类";
                            if(this.state.leftPageType==="菜类"){
                                leftPageType="助记码"
                            }
                            this.setState({
                                leftPageType:leftPageType,
                            })
                        }}>
                            <View style={styles.leftBottom1}>
                                <Text style={styles.letter}>
                                    <AntDesign name={'swap'} size={20} style={{color: '#c0c0c0'}}/>
                                </Text>
                            </View>
                        </TouchableOpacity>
                        {
                            (this.state.leftPagePosition==="left")
                            &&
                            (
                                <TouchableOpacity onPress={()=>{
                                    this.setState({
                                        leftPagePosition:"right",
                                    })
                                }}>
                                    <View style={styles.leftBottom2}>
                                        <Text style={styles.letter}>
                                            <AntDesign name={'arrowright'} size={20} style={{color: '#c0c0c0'}}/>
                                        </Text>
                                    </View>
                                </TouchableOpacity>
                            )
                        }
                    </View>
                </View>
                {
                    (this.state.leftPagePosition==="left")&&(this.showRightPage())
                }
            </SafeAreaView>
        )
    }

    renderLetter=(item,index)=>{
        return(
            <TouchableOpacity key={item}>
                <View style={styles.letterBox}>
                    <Text style={styles.letter}>
                        {item}
                    </Text>
                </View>
            </TouchableOpacity>
        )
    };

    showRightPage(){
        let css = {};
        if(this.state.leftPagePosition==="right"){
            css = {borderRightColor:'#dedede',borderRightWidth: 1}
        }else{
            css = {borderLeftColor:'#dedede',borderLeftWidth: 1}
        }
        return(
            <View style={[styles.rightPage,css]}>

            </View>
        )
    }

    showCL(){
        return(
            <View style={styles.leftTopPage}>
            </View>
        )
    }

    showZJM(){
        return(
            <View style={styles.leftTopPage}>
                <View style={styles.leftPage1}>
                    {
                        this.state.leftPage1_arr.map((item, index) => {
                            return this.renderLetter(item, index)
                        })
                    }
                    <TouchableOpacity >
                        <View style={styles.letterBox}>
                            <Text style={styles.letter}>
                                <AntDesign name={'enter'} size={20} style={{color: '#c0c0c0'}}/>
                            </Text>
                        </View>
                    </TouchableOpacity>
                </View>
                <View style={styles.leftPage2}>
                    {
                        this.state.leftPage2_arr.map((item, index) => {
                            return this.renderLetter(item, index)
                        })
                    }
                    <TouchableOpacity >
                        <View style={styles.letterBox}>
                            <Text style={styles.letter}>
                                <AntDesign name={'closesquareo'} size={20} style={{color: '#c0c0c0'}}/>
                            </Text>
                        </View>
                    </TouchableOpacity>
                </View>
                <View style={styles.leftPage3}>
                    {
                        this.state.leftPage3_arr.map((item, index) => {
                            return this.renderLetter(item, index)
                        })
                    }
                </View>
            </View>
        )
    }
}

const props = state => {
    return {}
};

export default TestScreen = connect(props)(TestScreen);

const styles = StyleSheet.create({

    body: {
        flex: 1,
        backgroundColor: '#ffffff',
        flexDirection:'row',
    },

    rightPage: {
        width: SCREEN_WIDTH-105,
        justifyContent: 'center',
        alignItems: 'flex-start',
        height: SCREEN_HEIGHT-Header.HEIGHT-20,
    },

    leftPage: {
        width: 105,
        flexDirection: 'column',
        backgroundColor: '#ffffff',
        height: SCREEN_HEIGHT-Header.HEIGHT-20,
    },

    leftTopPage:{
        flexDirection: 'row',
        flex:1,
    },

    leftBottomPage:{
        flexDirection: 'row',
        height:50,
        width:105,
        position:'absolute',
        bottom:0,
    },

    leftPage1:{
        width: 34,
        height: SCREEN_HEIGHT-Header.HEIGHT-70,
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'flex-start',
    },

    leftPage2:{
        width: 34,
        height: SCREEN_HEIGHT-Header.HEIGHT-70,
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'flex-start',
        paddingTop: 20,
    },

    leftPage3:{
        width: 34,
        height: SCREEN_HEIGHT-Header.HEIGHT-70,
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'flex-start',
        paddingTop: 40,
    },

    letterBox:{
        marginTop: 10,
        padding: 3,
        borderRadius:50,
        borderColor:'#c0c0c0',
        borderWidth: 1,
        backgroundColor:'#ffffff',
        width:30,
        height:30,
        alignItems:'center',
        justifyContent:'center',
    },

    letter: {
        fontSize: 16,
        color: '#C0C0C0'
    },

    leftBottom1:{
        width:52,
        height:50,
        alignItems:'center',
        justifyContent:'center',
        borderRightColor:'#ffffff',
        borderRightWidth: 1,
    },

    leftBottom2:{
        width:52,
        height:50,
        alignItems:'center',
        justifyContent:'center',
    },
})